<template>
	<view>
		<view class="top_box">
			<view class="information_box">
				<image src="https://res.huibiaow.cn/file/20250710/17521159004701.png" mode="" class="top_bg"></image>
				<view class="information_content">
					<view class="name">{{myInfo.username}}</view>
					<view class="companyName">{{myInfo.company}}</view>
					<view class="status">{{myInfo.position}}</view>

					<view class="information_item_box">
						<view class="information_item" v-if="myInfo.tel">
							<view class="information_title">电话</view>
							<view class="top_text" @click="copyText(myInfo.tel)">{{myInfo.tel}}</view>
						</view>
						<view class="information_item" @click="copyText(myInfo.email)" v-if="myInfo.email">
							<view class="information_title">邮箱</view>
							<view class="top_text">{{myInfo.email}}</view>
						</view>
						<view class="information_item" v-if="false" @click="copyText(myInfo.address)">
							<image src="https://www.zhenbiaow.com/static/admin/mingpian-icon3.png" mode=""
								class="top_icon"></image>
							<view class="top_text"> {{myInfo.address}}</view>
						</view>
						<view class="information_item" v-if="myInfo.webURL" @click="copyText(myInfo.webURL)">
							<view class="information_title">网址</view>
							<view class="top_text"> {{myInfo.webURL}}</view>
						</view>
					</view>
					<view class="rz_box">
						<img src="https://res.huibiaow.cn/file/20250710/17521158786900.png" alt="">
					</view>
				</view>
			</view>
			<view class="contact_box" :class="myInfo.id==114?'contact_bo_lv':''">
				<view class="item_box" @click.stop="call(myInfo.tel)">
					<image src="https://res.huibiaow.cn/file/20250710/17521159336293.png" mode="" class="item_icon"
						style="width:60rpx ; height: 60rpx;"></image>
					<view class="item_text">电话</view>
				</view>
				<view class="item_box" @click="addWechat()" v-if="myInfo.email&&myInfo.id!=114">
					<image src="https://res.huibiaow.cn/file/20250710/17521159548990.png" mode="" class="item_icon"
						style="width:60rpx ; height: 60rpx;"></image>
					<view class="item_text">微信</view>
				</view>
				<view class="item_box" @click="navigateToStore()" v-if="false">
					<image src="https://www.zhenbiaow.com/static/admin/mingpian-7.png" mode="" class="item_icon"
						style="width:60rpx ; height: 60rpx;"></image>
					<view class="item_text">地址</view>
				</view>
				<view class="item_box" @click="copyText(myInfo.webURL)">
					<image src="https://res.huibiaow.cn/file/20250710/17521159735313.png" mode="" class="item_icon"
						style="width:60rpx ; height: 60rpx;"></image>
					<view class="item_text">网址</view>
				</view>
			</view>
		</view>
		<view class="companyProfile_box">
			<view class="title_top">公司介绍</view>
			<view class="companyProfile_center">
				{{myInfo.company_describe}}
			</view>
		</view>
		<view style="height: 130rpx;"> </view>
		<view class="btn_box" v-if="!tabBarShow">
			<view class="btn" @click="goApp('/pages/index/index')">进入官方小程序</view>
		</view>

		<!-- 加销售微信 -->
		<uni-popup ref="ewmPopup" :mask-click="true">
			<view class="ewmPopup_box">
				<!-- <view class="title">咨询客服</view> -->
				<image :src="myInfo.qr_code" :show-menu-by-longpress='true' class="ewmPopup_box_img">
				</image>
				<view class="tip">长按图片识别二维码</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				myInfo: {
					username: '黄文杰',
					position: '资深商标顾问',
					tel: '15071032045',
					email: '137445943@qq.com',
					qr_code: '',
					webURL: 'https://www.hbqianbiao.com/',
					customerService: '400-027-0208',
					address: '武汉市江夏区光谷大道77号金融港A12栋1楼101-1号',
					company: '湖北千标知识产权管理有限公司',
					uid: '',
					company_describe: "千标知识产权成立于2021年，是一家专注于商标注册、品牌保护及知识产权全链条服务的现代化企业。我们以“让品牌更有价值”为核心理念，致力于为企业、创业者及个人提供高效、专业、可信赖的商标解决方案，助力客户在激烈的市场竞争中抢占品牌高地。"
				},
				id: '',
				xsPhone: "",
				share_phone: "",
				share_level: ""
			}
		},
		computed: {
			...mapState(['Statephone', 'is_jgg', "level", "tabBarShow"])
		},
		onLoad(options) {
			let _this = this;
			if (options.title) {
				uni.setNavigationBarTitle({
					title: options.title
				});
			}
			this.share_phone = options.phone ? options.phone : uni.getStorageSync("share_phone")
			this.share_level = options.level ? options.level : uni.getStorageSync("share_level")
			if (this.share_phone != undefined) {
				uni.setStorageSync("share_phone", this.share_phone)
			}
			if (this.share_level != undefined) {
				uni.setStorageSync("share_level", this.share_level)
			}
			this.xsPhone = options.phone ? options.phone : uni.getStorageSync("share_phone")
			console.log(this.xsPhone)
			// #ifdef MP-WEIXIN
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			uni.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			this.changeTabBar(this.share_phone + "-" + this.share_level)
			// #endif

		},
		onShow() {
			this.business_card();
			uni.setStorageSync('business_card', 1);
			let phones = uni.getStorageSync("phone") != "" ? uni.getStorageSync("phone") : uni.getStorageSync(
				"share_phone");
			if (this.xsPhone == "" & phones == "") {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		},

		onShareTimeline(res) {
			if (this.xsPhone != "") {
				let share_level = 0
				if (Number(this.level) != 3) {
					share_level = Number(this.level) + 1
				} else {
					share_level = 3
				}
				return {
					title: this.myInfo.username + '的名片推荐给您',
					path: '/pages/BusinessCard/BusinessCard?phone=' + this.xsPhone + "&level=" + Number(
						share_level),
					query: "phone=" + this.xsPhone + "&level=" + Number(
						share_level)
				}
			} else {
				let share_level = 0
				if (Number(this.level) != 3) {
					share_level = Number(this.level) + 1
				} else {
					share_level = 3
				}
				return {
					title: this.myInfo.username + '的名片推荐给您',
					path: '/pages/BusinessCard/BusinessCard?phone=' + uni.getStorageSync("phone") + "&level=" +
						Number(share_level),
					query: "phone=" + uni.getStorageSync("phone") + "&level=" + Number(
						share_level)
				}
			}
		},

		// 设置分享方法
		onShareAppMessage(res) {
			let _this = this;
			if (res.from === 'button') { // 来自页面内分享按钮 
				if (res.target.dataset.name === 'shareBtn') {
					if (this.xsPhone != "") {
						let share_level = 0
						if (Number(this.level) != 3) {
							share_level = Number(this.level) + 1
						} else {
							share_level = 3
						}
						return {
							title: this.myInfo.username + '的名片推荐给您',
							path: '/pages/BusinessCard/BusinessCard?phone=' + this.xsPhone + "&level=" + Number(
								share_level),
						}
					} else {
						let share_level = 0
						if (Number(this.level) != 3) {
							share_level = Number(this.level) + 1
						} else {
							share_level = 3
						}
						return {
							title: this.myInfo.username + '的名片推荐给您',
							path: '/pages/BusinessCard/BusinessCard?phone=' + uni.getStorageSync("phone") + "&level=" +
								Number(share_level),
						}
					}
				}
			}
			if (res.from === "menu") { // 来自页面右上角分享 
				if (this.xsPhone != "") {
					let share_level = 0
					if (Number(this.level) != 3) {
						share_level = Number(this.level) + 1
					} else {
						share_level = 3
					}
					return {
						title: this.myInfo.username + '的名片推荐给您',
						path: '/pages/BusinessCard/BusinessCard?phone=' + this.xsPhone + "&level=" + Number(share_level),
					}
				} else {
					let share_level = 0
					if (Number(this.level) != 3) {
						share_level = Number(this.level) + 1
					} else {
						share_level = 3
					}
					return {
						title: this.myInfo.username + '的名片推荐给您',
						path: '/pages/BusinessCard/BusinessCard?phone=' + uni.getStorageSync("phone") + "&level=" + Number(
							share_level),
					}
				}
			}
		},
		methods: {
			...mapMutations(['setUserMessage', 'changeTabBar']),
			async business_card(id) {
				let _this = this;
				let phone = uni.getStorageSync("phone") != "" ? uni.getStorageSync("phone") : uni.getStorageSync(
					"share_phone");
				if (this.xsPhone != "") {
					this.$request({
						url: 'index/index/mecard',
						data: {
							phone: this.xsPhone
						},
						success: (res) => {
							if (res.code === 200) {
								this.myInfo.username = res.data.data.username;
								this.myInfo.position = res.data.data.position;
								this.myInfo.qr_code = res.data.data.qr_code;
								this.myInfo.tel = res.data.data.tel;
								this.myInfo.email = res.data.data.email;
								this.myInfo.id = res.data.data.id;
								this.myInfo.company_describe = res.data.data.company_describe;
								this.webURL = res.data.data.url_address;

								// console.log("myInfo.id!=21||myInfo.id!=114", this.myInfo.id != 21 && this
								// 	.myInfo.id != 114)
							} else {
								if (this.xsPhone != "") {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}

							}
						}
					});
				} else {
					this.$request({
						url: 'index/index/mecard',
						data: {
							phone
						},
						success: (res) => {
							if (res.code === 200) {
								this.myInfo.username = res.data.data.username;
								this.myInfo.position = res.data.data.position;
								this.myInfo.qr_code = res.data.data.qr_code;
								this.myInfo.tel = res.data.data.tel;
								this.myInfo.email = res.data.data.email;
								this.myInfo.id = res.data.data.id;
								this.myInfo.company_describe = res.data.data.company_describe;
								this.webURL = res.data.data.url_address;

								// console.log("myInfo.id!=21||myInfo.id!=114", this.myInfo.id != 21 && this
								// 	.myInfo.id != 114)
							} else {
								if (phone != "") {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							}
						}
					});
				}

			},
			call(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				});
			},
			navigateToStore() {
				// 商家门店的经纬度
				const latitude = 30.455569; // 纬度
				const longitude = 114.422809; // 经度 		
				// 调用微信小程序的地图 API，导航到商家门店位置
				uni.openLocation({
					latitude: latitude, // 纬度
					longitude: longitude, // 经度
					scale: 18, //缩放比例，范围5~18，默认为18
					address: this.myInfo.address, // 地址
					name: this.myInfo.company, // 门店名称
				});
			},
			webview(url) {
				uni.navigateTo({
					url: '/subHomePage/webview/webview?url=' + encodeURIComponent(url)
				});
			},
			// 点击复制
			copyText(data) {
				uni.setClipboardData({
					data,
					success: (resa) => {
						uni.showToast({
							title: '复制成功'
						})
					},
					fail: (ers) => {
						console.log("ers", ers);
					},
				})
			},
			// 进入小程序
			goApp(url) {
				uni.switchTab({
					url
				});
			},
			addWechat() {
				this.$refs.ewmPopup.open('center');
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: url(https://res.huibiaow.cn/file/20250710/17521156234806.png) no-repeat;
		background-size: 100% 100%;
	}

	.top_box {
		background: #FFFFFF;
		border-radius: 40rpx;
		margin: 175rpx 24rpx 20rpx 24rpx;

		.information_box {
			position: relative;
			box-shadow: 13rpx 0 16rpx rgba(213, 190, 191, 0.35);

			.top_bg {
				width: 702rpx;
				height: 400rpx;
			}

			.information_content {
				position: absolute;
				top: 0rpx;
				left: 28rpx;
				right: 28rpx;
				height: 350rpx;
				padding: 28rpx 0rpx;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: flex-start;

				/* 姓名 */
				.name {
					font-family: 'PingFang-SC';
					font-weight: 600;
					font-size: 48rpx;
					color: #333;
					text-align: left;
					margin-bottom: 10rpx;
				}

				/* 公司 */
				.companyName {
					font-family: 'PingFang-SC';
					font-weight: 500;
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
				}

				/* 职位 */
				.status {
					font-family: 'PingFang-SC';
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-bottom: 36rpx;
					background: linear-gradient(90deg, #D32020 0%, #E85757 100%);
					padding: 7rpx 13rpx;
					border-radius: 5rpx;
				}

				.information_item_box {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: flex-start;
					flex: 1;

					.information_item {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-content: center;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 15rpx;

						.information_title {
							font-size: 24rpx;
							color: #777;
							margin-right: 20rpx;
						}


						.top_icon {
							width: 33rpx;
							height: 33rpx;
							margin-right: 10rpx;
							flex-shrink: 0;
						}

						.top_text {
							font-family: 'PingFang-SC';
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							text-align: left;
						}
					}
				}

				/* 认证 */
				.rz_box {
					position: absolute;
					width: 213upx;
					height: 46upx;
					right: 6upx;
					top: 36upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					img {
						width: 213rpx;
						height: 46rpx;
					}
				}
			}
		}

		.information_box_lv {
			position: relative;

			.top_bg {
				width: 702rpx;
				height: 400rpx;
			}

			.information_content {
				position: absolute;
				top: 0rpx;
				left: 28rpx;
				right: 28rpx;
				height: 400rpx;
				padding: 28rpx 0rpx;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				justify-content: center;
				align-items: flex-start;

				/* 姓名 */
				.name {
					font-family: 'PingFang-SC';
					font-weight: 600;
					font-size: 48rpx;
					color: #333333;
					text-align: left;
					margin-bottom: 10rpx;
					background: linear-gradient(84deg, #F3FCFE 0%, #FFF3D2 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				/* 公司 */
				.companyName {
					font-family: 'PingFang-SC';
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 10rpx;
					background: linear-gradient(84deg, #F3FCFE 0%, #FFF3D2 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				/* 职位 */
				.status {
					font-family: 'PingFang-SC';
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-bottom: 80rpx;
					background: linear-gradient(84deg, #F3FCFE 0%, #FFF3D2 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.information_item_box {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					justify-content: space-between;
					align-items: flex-start;
					flex: 1;

					.information_item {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						align-content: center;
						justify-content: flex-start;
						align-items: center;
						/* margin-bottom: 8rpx; */


						.top_icon {
							width: 33rpx;
							height: 33rpx;
							margin-right: 10rpx;
							flex-shrink: 0;
						}

						.top_text {
							font-family: 'PingFang-SC';
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							text-align: left;
							background: linear-gradient(84deg, #F3FCFE 0%, #FFF3D2 100%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
			}
		}

		.identification {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 31rpx;

			.left {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: flex-start;
				align-items: center;
				flex-shrink: 0;

				.identification_icon_title {
					width: 23rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}

				.top_text {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: flex-end;
				align-items: center;

				.right_icon_left {
					width: 71rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}

				.right_icon_right {
					width: 86rpx;
					height: 26rpx;
				}
			}

		}

		.contact_box {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: center;
			align-items: center;
			padding: 0rpx 31rpx 30rpx 31rpx;
			margin-top: 10rpx;
			background-color: #fff;
			border-radius: 0 0 40rpx 40rpx;

			.item_box {
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: space-between;
				align-items: center;
				margin: 0 75rpx;

				.item_text {
					font-family: 'PingFang-SC';
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					margin-top: 12rpx;
				}
			}
		}

		.contact_bo_lv {
			/* justify-content: space-around !important; */
			padding: 0rpx 50rpx 30rpx 50rpx;
		}
	}

	.business_box {
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 32rpx 32rpx;
		margin: 0rpx 24rpx 20rpx 24rpx;

		.title_top {
			font-family: 'PingFang-SC';
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			/* margin-bottom: 32rpx; */
			padding-bottom: 32rpx;
			text-align: center;
			/* border-bottom: 2rpx solid #F7F7F7; */
		}

		.business_bottom {
			.btn_mobile {
				margin: 0rpx;
				padding: 0rpx;
				border-radius: 0rpx;
				border: none;
				background: transparent;
				width: 640rpx;
				height: 400rpx;
			}

			.btn_mobile::after {
				content: " ";
				width: 100%;
				height: 100%;
				border-radius: none;
				border: none;
			}
		}
	}

	.companyProfile_box {
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 32rpx 32rpx;
		margin: 0rpx 24rpx 0rpx 24rpx;

		.title_top {
			font-family: 'PingFang-SC';
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			text-align: center;
			/* border-bottom: 2rpx solid #F7F7F7; */
			/* margin-bottom: 32rpx; */
			padding-bottom: 32rpx;
		}

		.companyProfile_center {
			font-family: 'PingFang-SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 60rpx;
			text-align: justifyLeft;
		}
	}

	.btn_box {
		position: fixed;
		bottom: 30rpx;
		left: 0rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-between;
		align-items: center;

		.btn {
			font-family: 'PingFang-SC';
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 75rpx;
			width: 314rpx;
			height: 75rpx;
			background: linear-gradient(90deg, #FF3838 0%, #FF2525 100%);
			box-shadow: 2rpx 0rpx 10rpx 0rpx #3779FF;
			border-radius: 35rpx 35rpx 35rpx 35rpx;
		}
	}

	.ewmPopup_box {
		/* width: 400rpx; */
		/* height: 500rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 35rpx 24rpx;

		.title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #333333;
			margin-bottom: 10rpx;
		}

		.tip {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			padding-top: 35rpx;
		}

		.ewmPopup_box_img {
			width: 550rpx;
			height: 752rpx;
			border-radius: 20rpx;
		}
	}
</style>